import {createNamespace, isDef} from '../utils';
import {PopupMixin} from '../mixins/popup';
import Icon from '../icon';

var _createNamespace = createNamespace('popup'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    mixins: [PopupMixin()],
    props: {
        round: Boolean,
        duration: Number,
        closeable: Boolean,
        transition: String,
        safeAreaInsetBottom: Boolean,
        closeIcon: {
            type: String,
            default: 'cross'
        },
        closeIconPosition: {
            type: String,
            default: 'top-right'
        },
        position: {
            type: String,
            default: 'center'
        },
        overlay: {
            type: Boolean,
            default: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        }
    },
    beforeCreate: function beforeCreate() {
        var _this = this;

        var createEmitter = function createEmitter(eventName) {
            return function (event) {
                return _this.$emit(eventName, event);
            };
        };

        this.onClick = createEmitter('click');
        this.onOpened = createEmitter('opened');
        this.onClosed = createEmitter('closed');
    },
    render: function render() {
        var _bem;

        var h = arguments[0];

        if (!this.shouldRender) {
            return;
        }

        var round = this.round,
            position = this.position,
            duration = this.duration;
        var transitionName = this.transition || (position === 'center' ? 'van-fade' : "van-popup-slide-" + position);
        var style = {};

        if (isDef(duration)) {
            style.transitionDuration = duration + "s";
        }

        return h("transition", {
            "attrs": {
                "name": transitionName
            },
            "on": {
                "afterEnter": this.onOpened,
                "afterLeave": this.onClosed
            }
        }, [h("div", {
            "directives": [{
                name: "show",
                value: this.value
            }],
            "style": style,
            "class": bem((_bem = {
                round: round
            }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
            "on": {
                "click": this.onClick
            }
        }, [this.slots(), this.closeable && h(Icon, {
            "attrs": {
                "role": "button",
                "tabindex": "0",
                "name": this.closeIcon
            },
            "class": bem('close-icon', this.closeIconPosition),
            "on": {
                "click": this.close
            }
        })])]);
    }
});